<template>
  <div>
    <el-button @click="showSpuAdd" type="primary" icon="el-icon-plus" :disabled="!categoryStore.category3Id">添加SPU</el-button>
   
    <el-table
      style="margin: 20px 0;"
      :data="spuList"
      row-key="id"
      border>
      <el-table-column
        label="序号"
        width="80"
        align="center">
        <template v-slot="{$index}">{{pageSize * (current-1) + $index + 1}}</template>
      </el-table-column>
      <el-table-column
        label="SPU名称"
        prop="spuName">
      </el-table-column>
      <el-table-column
        label="SPU描述"
        prop="description">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="{row}">
          <el-button @click="showSkuAdd(row)" title="添加SKU" type="primary" :icon="Plus" size="small"></el-button>
          <el-button @click="showSpuUpdate(row)" title="修改SPU" type="primary" :icon="Edit" size="small"></el-button>
          <el-button @click="showSkuList(row)" title="查看SKU列表" type="info" :icon="InfoFilled" size="small"></el-button>
          <el-button title="删除SPU" type="danger" :icon="Delete" size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="current"
      :page-sizes="[3, 6, 9]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="getSpuList"
      @size-change="getSpuList(1, $event)">
    </el-pagination>

    <el-dialog :title="`${spu?.spuName} => SKU列表`" v-model="isShowDialog">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column property="skuName" label="名称"></el-table-column>
        <el-table-column property="price" label="价格(元)"></el-table-column>
        <el-table-column property="weight" label="重量(KG)"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.skuDefaultImg"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SpuList',
}
</script>

<script lang="ts" setup>
  import { ElButton, ElTable, ElTableColumn, ElImage, ElDialog, ElPagination } from 'element-plus';
  import {Plus, Edit, InfoFilled, Delete} from '@element-plus/icons-vue'
  import {ref, watch} from 'vue'
  import type { SpuListModel, SpuModel } from '@/api/product/model/spuModel';
  import type { SkuListModel } from '@/api/product/model/skuModel';
  import { getSpuListApi } from '@/api/product/spu';
  import { findSkuListBySpuIdApi } from '@/api/product/sku';
  import {ShowStatus} from '../types'
  import { useCategoryStore } from '@/stores/category';

  const categoryStore = useCategoryStore();
  // 定义事件
  const emits = defineEmits(['setShowStatus', 'setCurrentSpu']);

  const spuList = ref<SpuListModel>([])
  const total = ref<number>(0)
  const current = ref<number>(1)
  const pageSize = ref<number>(3)

  const isShowDialog = ref(false)
  const spu = ref<SpuModel>()
  const loading = ref(false)
  const skuList = ref<SkuListModel>([])

  /* 
  显示SPU添加界面
  */
  const showSpuAdd = () => {
    emits('setShowStatus', ShowStatus.ADD_SPU);
    emits('setCurrentSpu');
  }

  /**
   * 显示SPU更新界面
   * @param row 
   */
  const showSpuUpdate = (row: SpuModel) => {
    emits('setShowStatus', ShowStatus.ADD_SPU);
    emits('setCurrentSpu', {
      ...row,
      spuImageList: [],
      spuSaleAttrList: []
    });
  }

  /**
   * 显示SKU添加界面
   * @param row 
   */
  const showSkuAdd = (row: SpuModel) => {
    emits('setShowStatus', ShowStatus.ADD_SKU);
    emits('setCurrentSpu', {
      ...row,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  }

  /**
   * 获取指定页码的列表显示
   * @param page 页码
   * @param limit 每页数量
   */
  const getSpuList = async (page=current.value, limit=pageSize.value) => {
    // 更新当前页码
    current.value = page
    pageSize.value = limit
    // 发请求获取
    const result = await getSpuListApi ({ page, limit, category3Id: categoryStore.getCategory3Id as number })
    // 读取更新数据
    spuList.value = result.records
    total.value = result.total
  }

  /* 
  监视三级分类的变化, 当其没值时, 重置数据, 当有值时, 获取SPU列表
  */
  watch(
    () => categoryStore.category3Id,
    (category3Id) => {
      if (!category3Id) {
        spuList.value = [];
        current.value = 1;
        pageSize.value = 3;
        total.value = 0;
        return;
      }

      getSpuList();
    },
    { immediate: true },
  )

  /**
   * 显示指定spu下的sku列表
   * @param row spu对象
   */
  const showSkuList = async (row: SpuModel) => {
    isShowDialog.value = true
    spu.value = row
    loading.value = true
    // 发请求
    skuList.value = await findSkuListBySpuIdApi(row.id as number)
    loading.value = false
  }
</script>

<style scoped>

</style>
